<template>
  <div>
    <div id="pie" style="width:100%;height:350px;"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      companyName: this.$route.query.name || "",
      chart: null
    };
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  mounted() {
    this.chart = this.$echarts.init(document.getElementById("pie"), "macarons");
    this.init();
  },
  methods: {
    init() {
      this.$get(this.$Url.science.direction, {
        companyName: this.companyName,
        dataType: "patentAnalysis"
      }).then(data => {
        // return
        if (data.data) {
          let analysisData = data.data.patentAnalysis;
          // let chartOneData =  []
          let source = [["product", "nums"]];
          for (let i = 0; i < analysisData.ipcPie.length; i++) {
            let x = analysisData.ipcPie[i].value;
            // chartOneData.push({'name': x, 'value': Math.ceil(analysisData.ipcPie[i].num / analysisData.ipcPie[i].total * 100) });
            source.push([
              x,
              Math.ceil(
                (analysisData.ipcPie[i].num / analysisData.ipcPie[i].total) *
                  100
              )
            ]);
          }
          this.getChart(source);
        }
      });
    },
    getChart(val) {
      this.chart.setOption({
        backgroundColor: "#fff",
        dataset: {
          source: val
        },
        grid: [
          {
            left: "50%",
            bottom: "0",
            top: "30%",
            right: "5%",
            containLabel: true
          }
        ],
        legend: {
          show: true,
          left: "20",
          top: "20",
          itemGap: 20,
          icon: "circle",
          orient: "horizontal"
        },
        tooltip: {
          show: true
        },
        xAxis: [
          {
            type: "category",
            axisLine: {
              lineStyle: {
                color: "#e7e8ec"
              }
            },
            axisLabel: {
              color: "#888797",
              interval: "auto",
              inside: false,
              rotate: 70,
              // lineHeight: '15',
              formatter: function(params) {
                var newParamsName = ""; // 最终拼接成的字符串
                var paramsNameNumber = params.length; // 实际标签的个数
                var provideNumber = 7; // 每行能显示的字的个数
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
                /**
                 * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                 */
                // 条件等同于rowNumber>1
                if (paramsNameNumber > provideNumber) {
                  /** 循环每一行,p表示行 */
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = ""; // 表示每一次截取的字符串
                    var start = p * provideNumber; // 开始截取的位置
                    var end = start + provideNumber; // 结束截取的位置
                    // 此处特殊处理最后一行的索引值
                    if (p == rowNumber - 1) {
                      // 最后一次不换行
                      tempStr = params.substring(start, paramsNameNumber);
                    } else {
                      // 每一次拼接字符串并换行
                      tempStr = params.substring(start, end) + "\n";
                    }
                    newParamsName += tempStr; // 最终拼成的字符串
                  }
                } else {
                  // 将旧标签的值赋给新标签
                  newParamsName = params;
                }
                //将最终的字符串返回
                return newParamsName;
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed"
              }
            },
            splitArea: {
              show: false
            },
            axisTick: {
              show: false
            }
          },
          {
            type: "category",
            axisLine: {
              lineStyle: {
                color: "#e7e8ec"
              }
            },
            axisLabel: {
              color: "#888797"
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed"
              }
            },
            splitArea: {
              show: false
            },
            axisTick: {
              show: true
            }
          }
        ],
        yAxis: [
          {
            type: "value",
            zlevel: 0,
            axisLine: {
              lineStyle: {
                color: "#e7e8ec"
              }
            },
            axisLabel: {
              color: "#888797"
            },
            splitLine: {
              lineStyle: {
                width: "2",
                type: "dotted"
              }
            },
            splitArea: {
              show: false
            },
            axisTick: {
              show: false
            }
          },
          {
            type: "value",
            axisLine: {
              lineStyle: {
                color: "#e7e8ec"
              }
            },
            axisLabel: {
              show: false,
              color: "#888797"
            },
            splitLine: {
              show: false,
              lineStyle: {
                type: "solid"
              }
            },
            splitArea: {
              show: false
            },
            axisTick: {
              show: false
            }
          }
        ],
        series: [
          {
            tooltip: {
              trigger: "item",
              formatter: "{b} : {c} ({d}%)"
            },
            type: "pie",
            radius: ["30%", "46%"],
            center: ["25%", "60%"],
            //avoidLabelOverlap: false,

            minAngle: 20,
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                color: "#8a8ba7",
                // formatter: "{b}{d}%",
                formatter: (param) => {
                  let name = param.name
                  if (name.length > 10) {
                    name = name.substr(0, 10) + '...'
                  }
                  let percent = param.percent
                  return `${name}${percent}%`
                }
              }
            },
            labelLine: {
              normal: {
                show: true,
                lineStyle: {
                  color: "#8a8ba7"
                }
              }
            },
            itemStyle: {
              normal: {
                borderWidth: 2,
                borderColor: "#fff"
              }
            },
            encode: {
              itemName: "product",
              value: "nums"
            }
          },
          //亮色条 百分比
          {
            show: true,
            type: "bar",
            barGap: "-100%",
            barWidth: "20%",
            z: 2,
            itemStyle: {
              normal: {
                color: function(params) {
                  var colorList = [
                    "#6485fd",
                    "#1fd8bd",
                    "#7374f1",
                    "#64c7f5",
                    "#405ada",

                    "#dda4ff",
                    "#cd9576",
                    "#fe9e86",
                    "#ff6464",
                    "#ffbb43",

                    "#5ff9a8",
                    "#40ddff",
                    "#6a8ae5",
                    "#e85a90",
                    "#353f84",

                    "#5d76b0",
                    "#7f90ae",
                    "#40ddff",
                    "#a2a8ef",
                    "#b33c5a"
                  ];
                  return colorList[params.dataIndex];
                }
              }
            },
            label: {
              normal: {
                show: false,
                textStyle: {
                  color: "#000",
                  fontSize: 25,
                  fontWeight: "bold"
                },
                position: "right"
              }
            },
            encode: {
              x: "product"
            }
          }
        ]
      });
    }
  }
};
</script>
<style lang="scss" scoped>
</style>